<template>
  <div class="commodity">
    <loading :isShow="showLoading"></loading>
    <div class="commodity-content" ref="elcontent">
      <div class="commodity-header">
        <div class="commodity-header-back" @click="back()"><img src="../../assets/images/back_white.png"></div>
        <div>
          <previewer :list="assemble(items.goods.imageList)" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
        </div>
        <swiper direction="horizontal" auto height="10rem" :show-desc-mask="false" dots-position="center" loop>
          <swiper-item v-for="(img,index) in items.goods.imageList" :key="index">
            <img class="previewer-demo-img" style="height:10rem" :src="img" @click="show(index)" />
          </swiper-item>

        </swiper>
      </div>
      <div class="commodity-second">
        <div class="commodity-second-name">
          {{items.goods.goodsName}}
        </div>
        <div class="commodity-second-price">
          {{items.goods.price|currency}}
        </div>
        <div class="commodity-second-flx">
          <div class="commodity-second-flx-left">
            <span>快递：{{items.goods.logFee}}</span>
          </div>
          <div class="commodity-second-flx-center">
            <span>销量：{{items.goods.sale}}</span>
          </div>
          <div class="commodity-second-flx-right">
            <popover placement="left">
              <div slot="content" class="popover-demo-content">
                {{items.goods.provinceName}}{{items.goods.countyName}}
              </div>
              <span>{{items.goods.provinceName}}{{items.goods.countyName}}</span>
            </popover>
          </div>
        </div>
      </div>
      <div class="commodity-three">
        <div class="commodity-three-card">
          <div class="commodity-three-card-title">
            选择商品属性
          </div>
          <div class="commodity-three-card-content" v-for="(attrs,index) in items.goods.saleAttrs">
            <div class="commodity-three-card-content-title">
              {{attrs.attrName}}
            </div>
            <div class="commodity-three-card-content-tag">
              <span v-for="(att,$index) in attrs.attrs" :class="$index==attrsArry[index]?'commodity-three-card-content-tag-ed':''" @click="handler(index,$index,att)">{{att.attrValueName}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="commodity-four">
        <div class="commodity-four-title">
          <load-more :show-loading="false" :tip="'商品详情'" background-color="#fbf9fe"></load-more>
        </div>
        <div class="commodity-four-content">
          <html-panel :url.asyc="items.goods.goodsDetail"></html-panel>
        </div>
      </div>
    </div>
    <div class="commodity-footer">
      <div class="commodity-footer-flx">
        <div class="commodity-footer-flx-col commodity-footer-flx-left"><img src="../../assets/images/share1.png" />分享</div>
        <div class="commodity-footer-flx-col commodity-footer-right" @click="goPurchase"><img src="../../assets/images/purchase.png" />立即购买</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Swiper, SwiperItem, LoadMore, Popover } from "vux";
import Previewer from "@/components/previewer";
import store from "@/store";
import { token_expires } from "@/utils/Keyword";
import { mapGetters } from "vuex";
import htmlPanel from "@/components/htmlPanel";
import Vue from "vue";
import loading from "@/components/loading";
import { setTimeout } from "timers";
import { scrollTo } from "@/utils/tool";
import { HashMap } from "@/utils/hashMap";
export default {
  name: "commodityDetail",
  components: {
    Swiper,
    SwiperItem,
    LoadMore,
    Previewer,
    htmlPanel,
    Popover,
    loading
  },
  computed: {
    ...mapGetters({
      items: "commodityDetail",
      attrsArry: "attrsArry"
    }),
    items() {
      this.detail = JSON.parse(JSON.stringify(this.copydetail));
      return this.assign(this.detail, this.$store.getters.commodityDetail);
    }
  },
  data() {
    return {
      showLoading: false,
      detail: {
        goods: {
          imageList: [],
          saleAttrs: [],
          goodsDetail: ""
        }
      },
      copydetail: "",
      options: {
        getThumbBoundsFn(index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll(".previewer-demo-img")[
            index
          ];
          // get window scroll Y
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop;
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect();
          // w = width
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    };
  },
  created() {
    this.copydetail = JSON.parse(JSON.stringify(this.detail));
  },
   beforeRouteEnter(to,from,next){
    next(vm => {
        if(vm && vm.$refs.elcontent){//通过vm实例访问this
          setTimeout(function () {
            let val = HashMap.get(to.fullPath);
            vm.$refs.elcontent.scrollTop=val;
          },0)//同步转异步操作
        }
    })
},
  beforeRouteLeave(to, from, next) {
    this.$nextTick(() => {
      let el = this.$refs.elcontent.scrollTop;
      let val = HashMap.get(from.fullPath);
      if (val) {
        HashMap.remove(from.fullPath);
      }
      HashMap.put(from.fullPath, el);
      next();
    });
  },
  mounted() {
    this.init();
    this.showLoading = true;
  },
  methods: {
    init() {
      let _this = this;
      setTimeout(function() {
        _this.getDetail();
      }, 700);
    },
    getDetail() {
      var params = {
        pf: "web",
        bid: "yw",
        uid: "",
        id: this.$route.query.id
      };

      store.dispatch("COMMODITYLIST", params).then(res => {
        if (res == token_expires) {
          this.getDetail();
        } else {
          
          this.combination();
          this.showLoading = false;
        }
      });
    },
    assemble(data) {
      let arr = [];
      data.forEach(element => {
        if (element) {
          arr.push({
            src: element,
            w: 800,
            h: 800
          });
        }
      });
      return arr;
    },
    logIndexChange(arg) {
      console.log(arg);
    },
    show(index) {
      this.$refs.previewer.show(index);
    },
    goPurchase() {
      this.$vux.loading.show({
        text: "正在提交"
      });
      let params = {
        goodsId: this.items.goods.goodsId,
        goodses: [
          {
            goodsId: this.items.goods.goodsId,
            skuId: this.items.goods.skuId,
            num: 1
          }
        ]
      };
      store.dispatch("ORDERCOMMIT", params).then(res => {
        if (res == token_expires) {
          this.getDetail();
        } else {
          this.$vux.loading.hide();
          this.navigation_push("conoforder",{
              id: this.items.goods.goodsId,
              skuId: this.items.goods.skuId
            })
        }
      });
    },
    back() {
     this.navigation_pop()
    },
    handler(pindex, index, attr) {
      this.$set(this.attrsArry, pindex, index);
      this.combination();
    },
    combination() {
      let arr = "";
      let _this = this;
      this.items.goods.saleAttrs.forEach(function(val, index) {
        let dom = val.attrs[_this.attrsArry[index]];
        if (_this.items.goods.saleAttrs.length == index + 1) {
          arr += dom.attrId + ":" + dom.attrValueId;
        } else {
          arr += dom.attrId + ":" + dom.attrValueId + ",";
        }
      });
      
      let result = this.items.goods.skus.filter(re => {
        if (re.attrValueIds == arr) return true;
      });
      if (result.length > 0) {
        this.assign(this.items.goods, result[0]);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.commodity {
  background-color: #f0f0f0;
  height: 100%;
  .commodity-content {
    height: calc(100vh - 1.3067rem);
    overflow: auto;
  }
  .commodity-header-back {
    position: absolute;
    padding: 0.5333rem;
    z-index: 100;
    img {
      height: 0.9067rem;
      width: 0.9067rem;
    }
  }
  .commodity-second {
    padding: 0 0.3333rem 0.36rem;
    background-color: white;
    .commodity-second-name {
      height: 1.1467rem;
      font-size: 0.4267rem;
      color: rgba(51, 51, 51, 1);
      padding-top: 0.2267rem;
    }
    .commodity-second-price {
      margin-top: 0.5467rem;
      font-size: 0.5333rem;
      color: rgba(243, 9, 1, 1);
    }
    .commodity-second-flx {
      display: flex;
      color: rgba(153, 153, 153, 1);
      font-size: 0.3467rem;
      margin-top: 0.5867rem;
      .commodity-second-flx-left {
        flex: 1;
      }
      .commodity-second-flx-center {
        flex: 1;
      }
      .commodity-second-flx-right {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .commodity-three {
    background-color: white;
    margin-top: 0.1333rem;
    padding-bottom: 0.2rem;
    .commodity-three-card {
      .commodity-three-card-title {
        font-size: 0.4267rem;
        color: rgba(51, 51, 51, 1);
        margin: 0 0 0 0.32rem;
        padding-top: 0.2533rem;
      }
      .commodity-three-card-content {
        .commodity-three-card-content-title {
          font-size: 0.3467rem;
          color: #999999;
          margin: 0.3733rem 0 0 0.3333rem;
        }
        .commodity-three-card-content-tag {
          margin: 0.4rem 0 0 0.32rem;
          font-size: 0.3467rem;
          .commodity-three-card-content-tag-ed {
            background: linear-gradient(
              90deg,
              rgba(242, 3, 0, 1),
              rgba(254, 78, 19, 1)
            ) !important;

            color: white !important;
          }
          span {
            padding: 0 0.3667rem;
            background: rgba(240, 240, 240, 1);
            margin-right: 0.2667rem;
            color: rgba(51, 51, 51, 1);
            margin-bottom: 0.2rem;
            border-radius: 0.08rem;
            height: 0.6667rem;
            line-height: 0.6967rem;
            display: inline-block;
          }
        }
      }
    }
  }
  .commodity-four {
    background-color: white;
    margin-top: 0.1333rem;
    .commodity-four-content{
      border-top: 5px solid #f0f0f0;
    }
    .commodity-four-title {
      padding: 0.2667rem 0;

      .weui-loadmore_line {
        margin: 0 auto !important;
      }
      .weui-loadmore_line:after {
        top: 10px !important;
      }
      .vux-loadmore.weui-loadmore_line:before,
      .vux-loadmore.weui-loadmore_line:after {
        top: 10px !important;
      }
    }
  }
  .commodity-footer {
    .commodity-footer-flx {
      display: flex;
      height: 1.3067rem;
      .commodity-footer-flx-col {
        flex: 1;
        justify-content: center;
        display: flex;
        align-items: center;
        img {
          width: 0.4533rem;
          height: 0.4533rem;
          margin-right: 0.2rem;
        }
      }
      .commodity-footer-flx-left {
        background: rgba(241, 73, 20, 1);
        color: rgba(255, 255, 255, 1);
        font-size: 0.4267rem;
        height: 100%;
      }
      .commodity-footer-right {
        background: linear-gradient(
          90deg,
          rgba(242, 3, 0, 1),
          rgba(254, 78, 19, 1)
        );
        color: rgba(255, 255, 255, 1);
        font-size: 0.4267rem;
        height: 100%;
      }
    }
  }
}
</style>
